<template>
	<view class="urgrade_mask">
		<view class="urgrade_modal">
			<view class="urgrade_modal_header">
				<image src="/static/urgrade_bg.png" mode="scaleToFill" :style="{height: `${size}px`}" />
			</view>
			<view class="urgrade_modal_body">
				<view style="font-weight: bold;font-size: 14px;">本次升级</view>
				<scroll-view scroll-y style="height: 120px;padding: 5px 0;box-sizing: border-box;">
					<view v-for="i in 10" :key="i" class="text-line">
						{{ i }}、优化用户体验
					</view>
				</scroll-view>
			</view>
			<view class="urgrade_modal_footer" v-if="type == '1'" @click="getDownload()">
				立即升级
			</view>
			<view class="urgrade_modal_footer" v-else-if="type == '2'"
				:style="{background: `liner-gradient(to right, #5EDCFF ${progress}, #bdc3c7 ${progress})`}">
				{{ current }} / {{ total }}MB
			</view>
			<view class="urgrade_modal_footer" v-else-if="type == '3'">
				下载完成
			</view>

			<view class="close-circle" v-if="item.force != '1'">
				<u-icon name="close-circle" :size="34" color="#FFFFFF" @click="close()"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				item: {},
				type: '1',
				downloadTask: '',
				progress: '0%',
				current: 0,
				total: 0
			}
		},
		computed: {
			size() {
				return ((uni.getSystemInfoSync().windowWidth - 100) * 550 / 1100).toFixed(2)
			},
		},
		methods: {
			close() {
				this.downloadTask.abort()
				uni.navigateBack()
			},
			getDownload() {
				const downloadTask = this.downloadTask = uni.downloadFile({
					url: `${this.$FILE_URL}/files/packages/${this.item.platform}/${this.item.version}/package.${this.item.type}`,
					header: {
						token: uni.store.getters.token
					},
					success: (res) => {
						console.log(res);
						uni.toast.show('下载完成')
						uni.loading.show('正在安装')
						plus.runtime.install(res.tempFilePath, {
								force: false
							}, (res) => {
								console.log('安装成功: ', res);
								plus.runtime.restart()
							},
							(err) => {
								console.log('安装失败: ', err);
							})
					},
					fail: (error) => {
						uni.toast.show('下载失败')
						console.log('error: ', error);
					}
				})
				downloadTask.onProgressUpdate(({
					progress,
					totalBytesWritten,
					totalBytesExpectedToWrite
				}) => {
					console.log('progress: ', progress);
					this.progress = progress
					console.log('totalBytesWritten: ', totalBytesWritten);
					this.current = (totalBytesWritten / 1024 / 1024).toFixed(2)
					console.log('totalBytesExpectedToWrite: ', totalBytesExpectedToWrite);
					this.total = (totalBytesExpectedToWrite / 1024 / 1024).toFixed(2)
				})
			}
		},
		onLoad(options) {
			this.item == JSON.parse((options.item))
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent !important;
	}

	.urgrade_mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: .5);

		.urgrade_modal {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			width: calc(100% - 100px);
			margin: auto;
			transform: translateY(-50%) translateY(-40px);
			background: linear-gradient(to bottom, transparent 100px, #ffffff 100px);
			border-radius: 14px;

			&_header {
				width: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&_body {
				width: 100%;
				height: 140px;
				padding: 0 15px;
				box-sizing: border-box;

				.text-line {
					font-size: 12px;
					line-height: 20px;
				}
			}

			&_footer {
				display: flex;
				justify-content: center;
				padding: 8px 10px;
				width: 70%;
				margin: 10px auto 15px;
				border-radius: 25px;
				background-color: #5EDCFF;
				color: #ffffff;
			}

			.close-circle {
				position: absolute;
				bottom: -50px;
				left: 50%;
				transform: translate(-50%, 100%);
			}
		}
	}
</style>